import 'package:flutter/material.dart';
import 'package:mall/core/models/account.dart';
import 'package:mall/core/providers/pages/mine/account_list_model.dart';
import 'package:mall/core/providers/view_model.dart';
import 'package:mall/core/services/api.dart';
import 'package:mall/screens/account/account_detail_screen.dart';
import 'package:mall/screens/account/account_password_change.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class AccountPage extends StatelessWidget {
  static const routeName = '/AccountPage';
  final String args;

  AccountPage({
    Key key,
    @required this.args,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => AccountListModel(context.read<Api>(), args),
      child: Scaffold(
        appBar: AppBar(
          title: Text(args == 'user' ? '我的积分' : '店铺积分'),
        ),
        body: Consumer<AccountListModel>(
          builder: (context, model, child) {
            switch (model.viewState) {
              case ViewState.busy:
                return Center(
                  child: CircularProgressIndicator(),
                );
              case ViewState.error:
                return Center(
                  child: Text(model.errorMessage),
                );
              case ViewState.success:
                return _SuccessWidget(list: model.list);
              default:
                return Container();
            }
          },
        ),
      ),
    );
  }
}

class _SuccessWidget extends StatelessWidget {
  final List<Account> list;

  _SuccessWidget({
    Key key,
    this.list,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: EdgeInsets.symmetric(vertical: 8.w),
      itemBuilder: (context, index) {
        return _ListItemWidget(account: list[index]);
      },
      separatorBuilder: (context, index) {
        return SizedBox(height: 8.w);
      },
      itemCount: list.length,
    );
  }
}

class _ListItemWidget extends StatelessWidget {
  final Account account;

  const _ListItemWidget({
    Key key,
    @required this.account,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: InkWell(
        child: Column(
          children: <Widget>[
            _ListItemHeaderWidget(
              account: account,
            ),
            _ListItemFooterWidget(
              account: account,
            ),
          ],
        ),
        onTap: () => _onItemClicked(context),
      ),
    );
  }

  void _onItemClicked(BuildContext context) {
    Navigator.of(context).pushNamed(AccountDetailScreen.routeName, arguments: account.id);
  }
}

class _ListItemHeaderWidget extends StatelessWidget {
  final Account account;

  const _ListItemHeaderWidget({
    Key key,
    @required this.account,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 12),
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      height: 45,
      child: Row(
        children: <Widget>[
          Image.asset(
            'assets/images/account/ic_account.png',
            width: 20,
            color: Colors.grey,
          ),
          SizedBox(width: 6),
          Text(
            account.needPassword ?? true
                ? '${account.accountTypeName}'
                : '${account.accountTypeName}(免密)',
            style: TextStyle(fontSize: 17),
          ),
          SizedBox(width: 8),
          SizedBox(
            height: 24,
            child: OutlineButton(
              onPressed: () {
                _accountPasswordChange(context);
              },
              child: Text("修改保护密码", style: TextStyle(fontSize: 14)),
            ),
          ),
        ],
      ),
    );
  }

  /// 修改保护密码
  void _accountPasswordChange(BuildContext context) async {
    final result = await Navigator.of(context).pushNamed(
      AccountPasswordChange.routeName,
      arguments: account,
    );
    if (result != null) {
      final model = context.read<AccountListModel>();
      model.refresh();
    }
  }
}

class _ListItemFooterWidget extends StatelessWidget {
  final Account account;

  const _ListItemFooterWidget({
    Key key,
    @required this.account,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 6, horizontal: 12),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Text(
                  '余额',
                  style: TextStyle(fontSize: 14),
                ),
              ),
              Text.rich(
                TextSpan(
                  text: account.balance,
                  style: TextStyle(color: Theme.of(context).accentColor, fontSize: 20),
                  children: [
                    TextSpan(
                      text: '${account.accountTypeTag ?? '--'}',
                      style: TextStyle(fontSize: 15),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Divider(height: 1),
          Row(
            children: <Widget>[
              Expanded(
                child: Text(
                  account.allowWithdraw ? '清算冻结额度' : '--',
                  style: TextStyle(color: Colors.grey, fontSize: 14),
                ),
              ),
              Text(
                account.allowWithdraw ? '${account.withdrawCash}￥' : '--',
                style: TextStyle(color: Colors.grey, fontSize: 14),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Expanded(
                child: Text(
                  account.existNotArrived ? '未到账额度' : '--',
                  style: TextStyle(color: Colors.grey, fontSize: 14),
                ),
              ),
              Text(
                account.existNotArrived ? '${account.notArrivedBalance}￥' : '--',
                style: TextStyle(color: Colors.grey, fontSize: 14),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
